<template>
    <div class="wp">
        <div class="left">
            <!-- <span>上证指数 294945689</span>
            <span>博富商品 294945689</span> -->
        </div>
        <div class="right">
            <!-- <button v-if="isShowQIhuoHu == 1" class="btn_style" @click="opzhagnhu">期货户</button> -->
            <button v-if="isShowWaiPanHu == 1" class="btn_style" @click="opzhagnhu">期货账户</button>
            <div><i class="iconfonMy icon-hr xian"></i></div>
            <i class="iconfonMy icon-grid-sixteen red_style"></i>
            <i class="iconfonMy icon-xinhao green_style"></i>
            <span>{{ localTime }} -BF</span>
        </div>
    </div>
</template>

<script>
import { ipcRenderer } from 'electron'
import moment from 'moment'

export default {
    props: {

    },
    data() {
        return {
            isShowQIhuoHu: localStorage.getItem('ShowQIhuoHu') || 1,
            isShowWaiPanHu: localStorage.getItem('ShowWaiPanHu') || 1,
            localTime: ''
        };
    },
    mounted() {
        ipcRenderer.on('right_click_msg_win', (e, v) => {
            if (v.type == '期货户') {
                localStorage.setItem('ShowQIhuoHu', v.msg)
                this.isShowQIhuoHu = v.msg
            }
            if (v.type == '外盘户') {
                localStorage.setItem('ShowWaiPanHu', v.msg)
                this.isShowWaiPanHu = v.msg
            }
        })
        this.setTime()
    },
    methods: {
        opzhagnhu() {
             ipcRenderer.send('right_click_msg', { type: '打开下单' })
        },
        setTime() {
            this.localTime = moment(new Date()).format('HH:mm:ss')
            setTimeout(() => {
                this.setTime()
            }, 1000);
        }
    },
    components: {

    },
};
</script>

<style scoped lang="scss">
.wp {
    background-color: #191a1f;
    line-height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;

    .left {
        span {
            margin-left: 27px;
        }
    }

    .right {
        display: flex;
        align-items: center;

        button {
            padding: 0 15px;
            margin-right: 3px;
        }

        i {
            margin-right: 3px;

        }

        .xian {
            display: inline-block;
            color: rgba($color: red, $alpha: .7);
            animation: xianRota 2s linear infinite;
        }

        .red_style {
            color: rgba($color: #2cc12f, $alpha: .7);
        }

        .green_style {
            color: #2cc12f;
        }

        span {
            line-height: 33px;
            font-size: 14px;
        }
    }

    @keyframes xianRota {
        0% {
            transform: rotate(0deg);
        }

        25% {
            transform: rotate(45deg);
        }

        50% {
            transform: rotate(90deg);
        }

        75% {
            transform: rotate(135deg);
        }

        100% {
            transform: rotate(180deg);
        }
    }
}
</style>
